<template>
  <border title="即时通信" :close="true" w="750px" h="500px" @close="$emit('close')" x="calc(50% - 325px)" y="30%">
    <div class="msgPages">
      <div class="left">
        <div class="row" :class="select===index?'row_select':''" v-for="(item,index) in 12" @click="select=index">
          <i class="el-icon-user-solid icons"/>
          <div class="center">
            <div class="h">
              <span>用户{{ item }}</span>
              <span>12:01</span>
            </div>
            <div class="h">
              <span style="font-size: 12px;padding-left: 5px">{{ index === 0 ? '消息内容........' : '暂无消息' }}</span>
              <span v-if="index===0" style="background-color: #00afff;
              width: 20px; height: 20px;color: #ffffff;text-align: center;
              border-radius: 50%;">5</span>
            </div>
          </div>
        </div>

        <div class="row">
          <i class="el-icon-user-solid icons"/>
          <div class="center">
            <div class="h">
              <span>用户1</span>
              <span>12:01</span>
            </div>
            <div class="h">
              <span style="font-size: 12px;padding-left: 5px">消息..........消息.</span>
              <span style="background-color: #00afff;
              width: 20px; height: 20px;color: #ffffff;text-align: center;
              border-radius: 50%;">1</span>
            </div>
          </div>


        </div>

      </div>
      <div class="right">
        <div class="msgList">

          <!--          接受消息-->
          <div class="item" style="padding-right: 20px;" v-for="item in 2">
            <i class="el-icon-user-solid icons"/>
            <div class="center" style="margin-left: 5px;">
              <div class="h">
                <span>用户1</span>
                <span class="time">2025-01-01 00:00:12</span>
              </div>
              <div class="d">
                消息123123123123消息内容消息内容消息123123123123消息内容消息内容消息123123123123消息内容消息内容消息123123123123消息内容消息内容消息123123123123消息内容消息内容
              </div>
            </div>
          </div>
          <!--发送消息-->
          <div class="item" style="padding-left: 20px;">
            <div class="center" style="margin-right: 5px;">
              <div class="h">
                <span class="time">2025-01-01 00:00:12</span>
                <span>我</span>
              </div>
              <div class="d" style="background: #EBF6FF;">
                消息123123123123消息内容消息内容消息123123123123消息内容消息内容消息123123123123消息内容消息内容消息123123123123消息内容消息内容消息123123123123消息内容消息内容
              </div>
            </div>
            <i class="el-icon-user-solid icons"/>
          </div>
        </div>
        <div class="MsgBottomBtn">
          <div class="inputs">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="msgTxt"/>
          </div>
          <div class="btn">
            <div class="btnRow">
              <i class="el-icon-location-outline"/>
              <i class="el-icon-picture-outline"/>
              <i class="el-icon-video-camera"/>
              <i class="el-icon-document"/>
            </div>
            <span>发送</span>
          </div>
        </div>
      </div>
    </div>
  </border>

</template>
<script>
import border from "@/views/formShortLink/border/index.vue";

export default {
  components: {border},
  data() {
    return {
      msgTxt: undefined,
      select: 0,
    }
  }
}
</script>
<style scoped lang="scss">
.msgPages {

  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;


  .left {
    width: 350px;
    border-right: 1px solid #DCDFE6;
    padding: 10px;
    height: 100%;
    overflow: auto;

    .row {
      display: flex;
      flex-direction: row;
      padding: 10px;
      border-radius: 4px;
      cursor: pointer;
      //background-color: #00afff;

      .icons {
        font-size: 18px;
      }

      .center {
        display: flex;
        flex-direction: column;
        width: 100%;
        //padding-top: 8px;
        line-height: 21px;
        margin-left: 3px;

        .h {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 20px;

          span:nth-child(2) {
            font-size: 11px;
          }
        }
      }

    }

    .row_select {
      background-color: #EBF6FF;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    padding: 10px;
    position: relative;
    width: 100%;

    .msgList {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: calc(100% - 90px);
      overflow: auto;

      .item {
        display: flex;
        flex-direction: row;
        padding: 10px 0;

        .center {
          display: flex;
          flex-direction: column;


          .h {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 5px;

            .time {
              font-size: 12px;
              color: #7B8096;
            }
          }

          .d {
            background-color: #F8FAF9;
            padding: 10px;
            border-radius: 4px;
            line-height: 17px;
          }
        }

      }
    }

    .MsgBottomBtn {
      position: absolute;
      bottom: 10px;
      display: flex;
      flex-direction: column;
      width: calc(100% - 20px);

      .btn {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        i {
          font-size: 23px;
          cursor: pointer;
          margin-right: 5px;
        }

        span {
          background-color: #00afff;
          padding: 7px 25px 5px 25px;
          color: #fff;
          border-radius: 4px;
          cursor: pointer;
        }

        span:hover {
          background-color: rgba(0, 175, 255, 0.89)
        }
      }
    }
  }

}
</style>
